<div class="flex flex-col flex-auto w-full p-4 sm:p-4">
	<div class="flex items-center justify-between mb-4 mx-3">
		<h1 class="text-3xl font-medium tracking-tight leading-none">Code tasks</h1>
		<div>
			<button mat-flat-button color="primary" (click)="createNewCodeTask()">
				<mat-icon svgIcon="heroicons_outline:plus"></mat-icon>
				<span class="ml-2">New</span>
			</button>
			<button
				class="ml-4"
				mat-flat-button
				[matTooltip]="'Refresh List'"
				(click)="refreshCodeTasks()"
				[disabled]="isLoading()"
			>
				<mat-icon [svgIcon]="'heroicons_outline:arrow-path'"></mat-icon>
			</button>
		</div>
	</div>

	<div class="overflow-auto bg-card rounded-lg shadow">
		<div *ngIf="isLoading()" class="p-8 text-center text-secondary">Loading tasks...</div>
		<div *ngIf="!isLoading()">
			<div *ngIf="codeTasks$ | async as codeTasks">
				<div *ngIf="codeTasks && codeTasks.length > 0; else noCodeTasks" class="mat-elevation-z0">
					<!-- Existing table -->
					<table mat-table [dataSource]="codeTasks" class="w-full" [trackBy]="trackByCodeTaskId">
						<!-- Title Column -->
						<ng-container matColumnDef="title">
							<th mat-header-cell *matHeaderCellDef>Title</th>
							<td mat-cell *matCellDef="let codeTask">{{ codeTask.title }}</td>
						</ng-container>

						<!-- Status Column -->
						<ng-container matColumnDef="status">
							<th mat-header-cell *matHeaderCellDef>Status</th>
							<td mat-cell *matCellDef="let codeTask">{{ codeTask.status | titlecase }}</td>
						</ng-container>

						<!-- Created At Column -->
						<ng-container matColumnDef="createdAt">
							<th mat-header-cell *matHeaderCellDef>Created At</th>
							<td mat-cell *matCellDef="let codeTask">
								{{ codeTask.createdAt | date:'medium' }}
							</td>
						</ng-container>

						<!-- Actions Column (Optional) -->
						<ng-container matColumnDef="actions">
							<th mat-header-cell *matHeaderCellDef>Actions</th>
							<td mat-cell *matCellDef="let codeTask">
								<button mat-icon-button (click)="viewCodeTask(codeTask.id); $event.stopPropagation()" aria-label="View Code Task">
									<mat-icon svgIcon="heroicons_outline:eye"></mat-icon>
								</button>
							</td>
						</ng-container>

						<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
						<tr
							mat-row
							*matRowDef="let row; columns: displayedColumns"
							(click)="viewCodeTask(row.id)"
							class="hover:bg-gray-100 dark:hover:bg-hover cursor-pointer"
						></tr>
					</table>
				</div>
				<ng-template #noCodeTasks>
					<div class="p-8 text-center text-secondary">No Code Tasks found. Create one to get started!</div>
				</ng-template>
			</div>
			<!-- Optional: Add a specific error message display here if codeTasks$ emits an error or is null and not loading -->
		</div>
	</div>
</div>

<!-- Remove the old complex HTML structure and #speechBubbleExtension template -->
